

// 获取题库
const questionList = JSON.parse(localStorage.getItem('questionList')) || []

/* 
tab切换
*/
function tabDiv(targetDiv) {
  const divs = document.querySelectorAll('.frame>div')
  // 隐藏所有div
  divs.forEach(div => {
    div.style.display = 'none'
  })

  const mode = targetDiv.getAttribute('data-mode')
  document.querySelector(mode).style.display = 'flex'
}

/* 
渲染 添加减少选项 输入框
*/

// 获取页面元素
const optionList = document.querySelector('.option-list')
const addOption = document.querySelector('#add-option')
const delOption = document.querySelector('#del-option')

// 监听添加选项按钮
let i = 0
addOption.addEventListener('click', () => {
  i++
  if (optionList.children.length < 7) {
    optionList.innerHTML = ''
    renderOption(i)
  } else {
    alert('不能大于七个选项！！！')
  }
})

// 监听删除选项按钮
delOption.addEventListener('click', () => {
  i--
  if (optionList.children.length > 4) {
    optionList.innerHTML = ''
    renderOption(i)
  } else {
    alert('不能少于四个选项！！！')
  }
})

// 渲染函数
function renderOption(index = 0) {
  // 65 : A ; 69 : E 
  for (let i = 0; i < 4 + index; i++) {
    optionList.innerHTML += `
      <div>
        <div>${String.fromCharCode(65 + i)}</div>
        <input type="text" id="option${String.fromCharCode(65 + i)}" data-option="${i}" placeholder="选项${i + 1}">
        <i class="iconfont i_8" onclick="" data-i="${String.fromCharCode(65 + i)}"></i>
      </div>
    `
  }
}
renderOption()



/* 
录入题库功能
*/

function add() {
  // 1. 获取试题信息
  const question = document.querySelector('#question').value
  const type = document.querySelector('#type').value
  const optionA = document.querySelector('#optionA').value
  const optionB = document.querySelector('#optionB').value
  const optionC = document.querySelector('#optionC').value
  const optionD = document.querySelector('#optionD').value
  const correctAnswer = document.querySelector('#correctAnswer').value
  // 2. 创建对象
  const obj = {
    id: questionList.length + 1,
    type: type,
    question: question,
    options: [{ option: 'A', value: optionA }, { option: 'B', value: optionB }, { option: 'C', value: optionC }, { option: 'D', value: optionD }],
    correctAnswer: correctAnswer
  }

  // 非空判断
  if (question && type && optionA && optionB && optionC && optionD && correctAnswer) {
    // 3. 追加试题
    questionList.push(obj)
    // 4. 保存到本地存储
    localStorage.setItem('questionList', JSON.stringify(questionList))

    // 5. 清空所有选项输入框
    for (let i = 0; i < 4; i++) {
      const optionInputId = 'option' + String.fromCharCode(65 + i) // 动态生成id
      document.querySelector('#' + optionInputId).value = '' // 清空对应id的输入框
    }
    document.querySelector('#question').value = ''
    document.querySelector('#correctAnswer').value = ''
    document.querySelector('#type').selectedIndex = 0
    alert('录入成功')
  } else {
    alert('请将所有选项填写完整')
  }
}
